@function rrem ($args){
    @return ($args/200)+rem
};
.top_bg{
    background: url('../images/member-bg1.png') no-repeat center top;
    background-size: 100% 100%;
    width: 100%;
    height: rrem(319);
    position: absolute;
    left: 0;
    top: rrem(242);
}
.top_bg_one{
    background: url('../images/boll3.png') no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    height: rrem(89);
    width: rrem(82);
    top: rrem(100);
    right: rrem(60);
}
.top_bg_two{
    background: url('../images/boll1.png') no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    height: rrem(54);
    width: rrem(49);
    top: rrem(320);
    left: rrem(19);
}
.content{
    display: flex;
    flex-direction: column;
    flex:1;
    .scroll_content{
        height: rrem(680);
        overflow: hidden;
        margin-top: rrem(126);
        position: relative;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        z-index: 1;
        .gift_lists{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            .gift_list{
                display: flex;
                width: rrem(598);
                height: rrem(170);
                .gift_list_left{
                    width: rrem(408);
                    text-align: right;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .gift_list_title{
                        height: rrem(88);
                        line-height: rrem(60);
                        padding-top: rrem(28);
                        font-size: rrem(40);
                        color: #2e42a2;
                    }
                    .gift_list_title_other{
                        height: rrem(170);
                        line-height: rrem(170);
                        font-size: rrem(40);
                        color: #2e42a2;
                        padding-top: 0;
                    }
                    .gift_list_price{
                        height: rrem(60);
                        line-height: rrem(60);
                        font-size: rrem(36);
                        color: #fff;
                    }
                }
                .gift_list_right{
                    flex:1;
                    color: #fff;
                    font-size: rrem(56);
                    padding-left: rrem(27);
                    font-weight: bold;
                    .gift_list_num{
                        width: rrem(75);
                        height: rrem(94);
                        line-height: rrem(110);
                        border-bottom: rrem(4) solid #fff;
                        text-align: center;
                    }
                    .gift_list_pic{
                        width: rrem(69);
                        height: rrem(45);
                        margin-top: rrem(4);
                        margin-left: rrem(3);
                        font-size: 0;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                &:nth-child(4n+1){
                    margin-left: rrem(40);
                    background: url('../images/list_bg.png') no-repeat center top;
                    background-size: 100% 100%;
                }
                &:nth-child(4n+2){
                    margin-left: rrem(120);
                    background: url('../images/list_bg1.png') no-repeat center top;
                    background-size: 100% 100%;
                    .gift_list_title_other{
                        color: #fff420;
                    }
                    .gift_list_num{
                        color: #bfa608;
                        border-bottom: rrem(4) solid #bfa608;
                    }
                }
                &:nth-child(4n+3){
                    margin-left: rrem(0);
                    background: url('../images/list_bg2.png') no-repeat center top;
                    background-size: 100% 100%;
                    .gift_list_title_other{
                        color: #2a7f99;
                    }
                    .gift_list_num{
                        color: #4ab9c0;
                        border-bottom: rrem(4) solid #4ab9c0;
                    }
                }
                &:nth-child(4n+4){
                    margin-left: rrem(80);
                    background: url('../images/list_bg1.png') no-repeat center top;
                    background-size: 100% 100%;
                    .gift_list_title_other{ 
                        color: #fff;
                    }
                    .gift_list_num{
                        color: #16aa90;
                        border-bottom: rrem(4) solid #16aa90;
                    }
                }
            }
        }
    }
    .news_lists{
        line-height: rrem(50);
        text-align: center;
        color:#4a383b;
        margin-top: rrem(28);
        position: relative;
        z-index: 10;
        .news_list{
            span{
                color: #ffb03a;
                font-weight: bold;
            }
        }
    }
    .message{
        height: rrem(73);
        line-height: rrem(73);
        color: #114c8e;
        font-size: rrem(30);
        text-align: center;
        position: relative;
        z-index: 10;
    }
}
.no_gift{
    color:#fff;
    font-size: rrem(32);
    line-height: rrem(50);
}